<!--
 * @Description: 图片替换
-->

<template>
  <div class="tool-item" :data-name="'替换图片'" @click="repleace" v-if="mSelectMode === 'one' && type === 'image'">
    <!-- <button @click="repleace" type="text" long>{{ '替换图片' }}</button> -->
    <svg t="1683138551339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="42353" width="26" height="26">
      <path
        d="M559.9 416c-44.1 0-80 35.9-80 80s35.9 80 80 80 80-35.9 80-80S604 416 559.9 416zM559.9 512c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16S568.8 512 559.9 512z"
        p-id="42354"></path>
      <path
        d="M896.3 288 383.6 288c-52.8 0-95.7 42.9-95.7 95.7l0 512.7c0 52.8 42.9 95.7 95.7 95.7l512.7 0c52.8 0 95.7-42.9 95.7-95.7L992 383.7C991.9 330.9 949 288 896.3 288zM927.9 896.3c0 17.5-14.2 31.7-31.7 31.7L383.6 928c-17.5 0-31.7-14.2-31.7-31.7l0-51.1 145.3-145.3c10.9-10.9 28-12.6 40.8-4l104.2 69.5c38.1 25.4 89.2 20.3 121.5-12l164.1-164.1L927.8 896.3zM927.9 498.8 718.6 708.1c-10.9 10.9-28 12.6-40.8 4l-104.2-69.5c-38.1-25.4-89.2-20.3-121.5 12L351.9 754.8 351.9 383.7c0-17.5 14.2-31.7 31.7-31.7l512.7 0c17.5 0 31.7 14.2 31.7 31.7L928 498.8z"
        p-id="42355"></path>
      <path
        d="M896.3 288 383.6 288c-52.8 0-95.7 42.9-95.7 95.7l0 512.7c0 52.8 42.9 95.7 95.7 95.7l512.7 0c52.8 0 95.7-42.9 95.7-95.7L992 383.7C991.9 330.9 949 288 896.3 288zM927.9 896.3c0 17.5-14.2 31.7-31.7 31.7L383.6 928c-17.5 0-31.7-14.2-31.7-31.7l0-51.1 145.3-145.3c10.9-10.9 28-12.6 40.8-4l104.2 69.5c38.1 25.4 89.2 20.3 121.5-12l164.1-164.1L927.8 896.3zM927.9 498.8 718.6 708.1c-10.9 10.9-28 12.6-40.8 4l-104.2-69.5c-38.1-25.4-89.2-20.3-121.5 12L351.9 754.8 351.9 383.7c0-17.5 14.2-31.7 31.7-31.7l512.7 0c17.5 0 31.7 14.2 31.7 31.7L928 498.8z"
        p-id="42356"></path>
      <path
        d="M896.3 288 383.6 288c-52.8 0-95.7 42.9-95.7 95.7l0 512.7c0 52.8 42.9 95.7 95.7 95.7l512.7 0c52.8 0 95.7-42.9 95.7-95.7L992 383.7C991.9 330.9 949 288 896.3 288zM927.9 896.3c0 17.5-14.2 31.7-31.7 31.7L383.6 928c-17.5 0-31.7-14.2-31.7-31.7l0-51.1 145.3-145.3c10.9-10.9 28-12.6 40.8-4l104.2 69.5c38.1 25.4 89.2 20.3 121.5-12l164.1-164.1L927.8 896.3zM927.9 498.8 718.6 708.1c-10.9 10.9-28 12.6-40.8 4l-104.2-69.5c-38.1-25.4-89.2-20.3-121.5 12L351.9 754.8 351.9 383.7c0-17.5 14.2-31.7 31.7-31.7l512.7 0c17.5 0 31.7 14.2 31.7 31.7L928 498.8z"
        p-id="42357"></path>
      <path
        d="M223.9 672l-96.3 0c-17.5 0-31.7-14.2-31.7-31.7l0-51.1 128-128 0-77.6c0-1.5 0-2.9 0.1-4.4-10.2 4.6-19.7 11.1-28 19.4L95.9 498.8 95.9 127.7c0-17.5 14.2-31.7 31.7-31.7l512.7 0c17.5 0 31.7 14.2 31.7 31.7L672 224l64 0 0-96.3c0-52.8-42.9-95.7-95.7-95.7L127.6 32c-52.8 0-95.7 42.9-95.7 95.7l0 512.7c0 52.8 42.9 95.7 95.7 95.7l96.3 0L223.9 672z"
        p-id="42358"></path>
      <path
        d="M248.9 298c11.6-18.2 26.7-33.8 44.5-46-3.3-2.9-5.5-7.2-5.5-12 0-8.8 7.2-16 16-16 7.9 0 14.5 5.8 15.8 13.4 19.2-8.4 40.4-13.2 62.6-13.3-7.4-36.5-39.8-64-78.4-64-44.1 0-80 35.9-80 80C223.9 262.8 233.5 283.4 248.9 298z"
        p-id="42359"></path>
    </svg>
    </svg>
  </div>
</template>

<script>
import select from '../mixins/select';
import { getImgStr, selectFiles, insertImgFile } from '../utils/utils';

export default {
  name: 'replaceImg',
  mixins: [select],
  inject: ['canvas', 'fabric'],
  data() {
    return {
      id: '',
    };
  },
  created() {
    this.event.on('selectOne', () => {
      const activeObject = this.canvas.c.getActiveObjects()[0];
      if (activeObject) {
        this.type = activeObject.type;
        this.$forceUpdate();
      }
    });
  },
  methods: {
    // 替换图片
    async repleace() {
      const activeObject = this.canvas.c.getActiveObjects()[0];
      if (activeObject && activeObject.type === 'image') {
        // 图片
        const [file] = await selectFiles({ accept: 'image/*', multiple: false });
        // 转字符串
        const fileStr = await getImgStr(file);
        // 字符串转El
        const imgEl = await insertImgFile(fileStr);
        const width = activeObject.get('width');
        const height = activeObject.get('height');
        const scaleX = activeObject.get('scaleX');
        const scaleY = activeObject.get('scaleY');
        activeObject.setSrc(imgEl.src, () => {
          activeObject.set('scaleX', (width * scaleX) / imgEl.width);
          activeObject.set('scaleY', (height * scaleY) / imgEl.height);
          this.canvas.c.renderAll();
        });
        imgEl.remove();
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
